<!--
 * @FilePath: /vue-ts/src/views/article/addarticle.vue
 * @Author: Yongchao Wang
 * @Date: 2020-09-16 22:38:08
 * @LastEditors: Yongchao Wang
 * @LastEditTime: 2020-09-17 20:52:53
-->
<template>
  <div>
    <a-row>

      <a-col :span='3'>
        <a-select @change="handleChange" placeholder='请选择' style="width:90%">
          <a-select-option v-for="(item, index) in types" :key="index">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-col>
       <a-col :span='13'>
        <a-input placeholder="请输入文章标题"></a-input>
      </a-col>
      <a-col :span='7' :offset='1'>
        <a-button type='primary'> 保存文章</a-button>
      </a-col>
    </a-row>
    <a-divider  />
    <a-row>
        <a-col :span='16'>
          <a-input type='textarea' :autoSize='{minRows:20}' placeholder='请输入文章内容'></a-input>
        </a-col>
        <a-col :span='7' :offset='1' flex='1'>
          <a-row>
            <a-col >
                  <a-date-picker style="width:100%" @change="onChange" />
            </a-col>
            <a-col style="margin-top:10px" >
          <a-input type='textarea' :autoSize='{minRows:18}' placeholder='请输入文章内容'></a-input>
        </a-col>
          </a-row>
        </a-col>
    </a-row>
  </div>
</template>

<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class AddArticle extends Vue {
  types = [{ name: '文章列表' }, { name: '生活剪影' }]

type = ''

handleChange(value: number) {
  this.type = this.types[value].name;
  console.log(this.type);
}

onChange() {

}
}
</script>
<style lang='scss' scoped>
</style>
